<script>
export default {
  name: "MenuTree", // 这里就是上边递归组件中使用的组件名字
  props: {
    menuList: {
      // 在这里增加了引入校验，方便错误排除
      type: Array,
      required: false,
    },
  },
  functional: true,
  render(createElement, { props }) {
    return props.menuList.map((item) => {
      if (item.children.length > 0) {
        return createElement(
          "el-submenu",
          {
            props: {
              index: item.path.toString(),
            },
          },
          [
            createElement(
              "template",
              {
                slot: "title",
              },
              [
                createElement("i", {
                  attrs: {
                    class: item.icon,
                  },
                }),
                item.title,
              ]
            ),
            createElement("MenuTree", {
              props: {
                menuList: item.children,
              },
            }),
          ]
        );
      } else {
        return createElement(
          "el-menu-item",
          {
            props: {
              index: item.path.toString(),
            },
          },
          [
            createElement(
              "template",
              {
                slot: "title",
              },
              [
                createElement("i", {
                  attrs: {
                    class: item.icon,
                  },
                }),
                item.title,
              ]
            ),
          ]
        );
      }
    });
  },
};
</script>
<style lang="scss">
.el-submenu__title i {
  color: #909399;
}
</style>
